<!-- 执行记录 -->
<template>
  <div style="height: 100%">
    <div style="height: 10%">
      <el-form ref="elForm" :inline="true" size="medium" label-width="100px">
        <el-form-item label="项目" prop="project_id">
          <el-select
            v-model="formProjectData.project_id"
            placeholder="请选择项目"
            @change="selectService(formProjectData.project_id)"
            filterable
            clearable
          >
            <el-option
              v-for="item in projectList"
              :key="item.id"
              :label="item.project_name"
              :value="item.id"
              :disabled="item.disabled"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="服务" prop="service_id">
          <el-select
            v-model="formServiceData.service_id"
            placeholder="请选择服务"
            @change="selectVersion(formServiceData.service_id)"
            filterable
            clearable
          >
            <el-option
              v-for="item in serviceList"
              :key="item.id"
              :label="item.service_name"
              :value="item.id"
              :disabled="item.disabled"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-button type="primary" @click="select_service_log()">查询</el-button
        ><br />
      </el-form>
    </div>
    <div style="height: 85%" v-show="case_log.length > 0">
      <el-table :data="case_log" style="width: 100%" height="100%">
        <el-table-column prop="log_name" label="名称" width="250">
        </el-table-column>
        <el-table-column prop="created" label="执行时间" width="180">
        </el-table-column>
        <el-table-column prop="username" label="操作人员" width="180">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="select_case_res_log(scope.row.id)"
              >查看报告信息</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="height: 85%" v-show="case_version_log.length > 0">
      <el-table :data="case_version_log" style="width: 100%" height="100%">
        <el-table-column
          prop="version_id"
          label="版本名称（多个版本是列表）"
          width="350"
        >
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="select_log(scope.row)"
              >点击查看版本执行记录</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      username: "",
      formData: {
        person: "",
        service: "",
        version: "",
        branch: "",
        versionAll: false,
        project: "",
      },
      formProjectData: {
        project_id: "",
        project_name: "",
      },
      formServiceData: {
        person: "",
        service_id: "",
        service_name: "",
      },
      formVersionData: {
        version_id: "",
      },

      branchList: [],
      serviceList: [],
      versionList: [],
      targeturl: [],
      caseList: [],
      fileList: [],
      countData: [],
      scanResult: [],
      projectList: [],
      projectList: [],
      serviceList: [],
      versionList: [],
      selectDataList: [],
      case_log: [],
      case_resp_log: [],
      case_version_log: [],
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    // 查询项目
    selectProject() {
      this.formData = [];
      this.$axios.get("/selectProject/").then((res) => {
        if (res.status === 200) {
          this.projectList = res.data;
        }
      });
    },

    // 查询服务
    selectService(project_id) {
      this.$axios
        .get("/serviceVersion/", { params: { project_id: project_id } })
        .then((res) => {
          if (res.status === 200) {
            console.log(this.formData.person);
            this.serviceList = res.data;
          }
        });
    },
    // 查询版本
    selectVersion(service_id) {
      this.$axios
        .get("/select_version/", { params: { service_id: service_id } })
        .then((res) => {
          this.versionList = res.data;
        });
    },
    // 查询执行记录
    select_log(row) {
      this.case_version_log = [];
      this.$axios
        .post("/select_log/", {
          project_id: this.formProjectData.project_id,
          service_id: this.formServiceData.service_id,
          version_name: row.version_id,
        })
        .then((res) => {
          this.case_log = res.data;
        });
    },
    // 根据服务查询版本
    select_service_log() {
      this.case_log = [];
      this.$axios
        .post("/select_service_log/", {
          service_id: this.formServiceData.service_id,
        })
        .then((res) => {
          this.case_version_log = res.data;
        });
    },
    // 查询用例执行结果
    select_case_res_log(log_id) {
      this.$axios
        .get("/select_case_res_log/", { params: { id: log_id } })
        .then((res) => {
          this.case_resp_log = res.data;
          this.routparam(res.data);
        });
    },
    // 页面数据传递
    routparam(caseresp) {
      this.$router.push({
        name: "caseReport",
        params: { caseresp: caseresp },
      });
    },
    //获取用户
    getUserName() {
      axios({
        method: "GET",
        url: "/getsession/user/",
        withCredentials: true,
      }).then((res) => {
        if (res.data.code == 1) {
          this.username = res.data.user;
        } else {
          this.$router.replace("/");
        }
      });
    },
  },

  mounted() {
    this.selectProject();
  },
};
</script>
<style >
</style>